import './index.css'
import { TabBar } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UserOutline,
} from 'antd-mobile-icons'
import { Outlet, useNavigate } from 'react-router-dom'

const Main = () => {
  const navigate = useNavigate()

  const tabs = [
    {
      key: 'home',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: 'message',
      title: '消息',
      icon: (active: boolean) =>
        active ? <MessageFill /> : <MessageOutline />,
    },
    {
      key: 'me',
      title: '我的',
      icon: <UserOutline />,
    },
  ]
  const handleTab = (key: string) => {
    if (key === 'home') {
      navigate('/')
    } else {
      navigate(`/${key}`)
    }
  }

  return (
    <>
      <div>
        <Outlet />
      </div>
      <div className='tab-bar'>
        <TabBar defaultActiveKey="home">
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} onClick={() => handleTab(item.key)} />
          ))}
        </TabBar>
      </div>
    </>
  )
}

export default Main